<template>
    
    <view class="address-card" v-for="(item, index) in dataList" :key="index" @tap.stop="toInfo(item)">
        <view class="header-box">
            <text>{{ item.name }}</text>
            <view>{{ item.mobile }}</view>
        </view>
        <view class="address">
            <text>{{ item.province }}{{ item.city }}{{ item.district }}{{ item.address }}</text>
        </view>
        <view class="footer-box">
            <radio-group @change="radioChange">
                <label class="uni-list-cell uni-list-cell-pd">
                    <view class="foot-item">
                        <radio :value="item.id" :checked="item.default==='1'" @change="radioChange"/>
                        <text>默认地址</text>
                    </view>
                </label>
            </radio-group>
            <view class="foot-item" @tap.stop="toDetail(item)">
                <up-icon name="edit-pen" color="#909193" size="24"></up-icon>
                <text>编辑</text>
            </view>
            <view class="foot-item" @tap.stop="deleteHandler(item)">
                <up-icon name="trash" color="#E84026" size="24"></up-icon>
                <text>删除</text>
            </view>
        </view>
    </view>

</template>
<script setup>
const props = defineProps({
    dataList: {
        type: Object,
        default: () => []
    }
})

const radioChange = async (e) => {
    const res = await qly.api.user.address.defaultChange({id: e.detail.value})
    if (res.code === 1) {
        qly.dialog.success('设置成功').catch()
        uni.$emit('addressRefresh')
    } else {
        qly.dialog.apiError(res).catch()
    }
}

// 删除地址
const deleteHandler = async (item) => {
    const res = await qly.dialog.messageBox({
        message: '确定删除吗？',
    })
    if (res) {
        const res = await qly.api.user.address.delete({id: item.id})
        if (res.code === 1) {
            qly.dialog.success('删除成功').catch()
            uni.$emit('addressRefresh')
        } else {
            qly.dialog.apiError(res).catch()
        }
    }
}

const toInfo = (item) => {
    if (qly.page.params.source === 'placeOrder') {
        uni.$emit('selectAddress', item)
        uni.navigateBack()
    } else {
        toDetail(item)
    }
}

const toDetail = (item) => {
    qly.page.open('/pages/my/address/save', {id: item.id})
}
</script>
<style scoped lang="scss">
.address-card {
    background-color: #fff;
    padding: 24rpx 32rpx;
    margin-bottom: 24rpx;
    border-radius: 12rpx;
    overflow: hidden;
    box-sizing: border-box;
    
    .header-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .address {
        font-size: 24rpx;
        color: #303133;
        line-height: 36rpx;
        padding: 12rpx 0;
        border-bottom: 2rpx solid #f5f5f5;
        margin-bottom: 12rpx;
    }
    
    .footer-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .foot-item {
            display: flex;
            align-items: center;
            gap: 8rpx;
            color: #303133;
        }
    }
}
</style>
